<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%
	pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
    <script src="${APP_PATH }/static/js/jquery-3.2.1.min.js"></script>
<title> 图片上传 </title>  
   
</head> 
<body>
<form enctype="multipart/form-data" method="post">
<div class="row" style="width:350px;" >                
      <span class="personattr" style="width:100px;display:inline;">资讯图片:</span>
         <a href="javascript:void(0);" class="btn_addPic">
         <span>上传图片</span>     
         <input type="file" multiple="multiple" name="files" id="pic_upload" style="display:inline;" class="selectedLogoImgId">  
    <span id="imgss">
      <div class="cp-img" style="top:50px;heigh:20px;" id="logoImgDiv5">
         <ul id="bannerImg" style="list-style:none;">
         <li style="display:none;" id="a0">
         <c:forEach items="${imgs}" var="img" varStatus="st">
         <li id="a1"><!-- ${img.id }  -->
     <input type="hidden" value="${img.id }" name="imgId" id="imgId${img.id }">
     <input type="hidden" value="${img.imgUrl }" name="imgUrl" id="imgUrl${img.id }">

     <img src="${img.imgUrl }" original='${img.imgUrl }' width="500" height="400" style="border-bottom-width: 0px; border:solid 1px black; padding-top: 20px;">   
     <a href="#" onclick="deleteImg(${img.id})">删除</a>
        </li>
        </c:forEach>                                   
        </ul>
        </div>                                         
   </span>
   <span id="hiddenss"></span>
  </div>
  </form>
  </body>
  
  <script type="text/javascript">
//上传图片js
  $("#pic_upload").change(function(){     //用于进行图片上传，返回地址
              var f=$("#pic_upload").val();
              if(f == null || f ==undefined || f == ''){
                  return false;
              }
              if(!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f))
              {
                  alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
                  $("#pic_upload").val('');
                  return false;
              }
              var formData = new FormData();
              $.each($("#pic_upload")[0].files,function(i,file){
            	  formData.append('files', file);
            	  alert("文件属性"+file);
              });
             formData.append('id', 4);
              $.ajax({
                  type: "POST",
                  url: "http://localhost:8080/Anime-sky/uploadImg",
                  data: formData,
                  cache: false,
                  contentType: false,    //不可缺 避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件
                  processData: false,    //不可缺 默认为true。默认情况下，发送的数据将被转换为对象
                  dataType:"json",
                  success: function(result) {
                      if(result.code== 520){                        
                          var id = $('#bannerImg li:last').attr('id');
                           id = id.substr(1);
                           id = parseInt(id) + 1;
                           alert("返回值成功");
                           $.each(result.extend.imglist, function(index,item) {
                        	   id = id + index;
                        	   var ids=id;
                               id = 'a'+id; 
                               alert("上传成功"+item);
                               //拼接删除按钮                                                
                           var a_hidden="<li style= 'float:left;'id='"+ id +"'><div style='position:relative;height:120px;width:120px;'><input type='hidden' value='"+item+"' name='imgUrl'>";
                           var img_html="<img src='"+item+"' width='120' height='120'>";
                           var a_html="<a href='#' style='position:absolute;left:40px;top:120px;' onclick='delespan("+ids+")'>删除</a>";
                           var li_html="</div></li>";
                           $('#bannerImg').append(a_hidden+img_html+a_html+li_html); 
                           });
                      }else{
                          alert("上传失败");
                          $("#url").val("");
                          $(obj).val('');
                      }
                  },
                  error: function(XMLHttpRequest, textStatus, errorThrown) {
                      alert("上传失败，请检查网络后重试");
                      $("#url").val("");
                      $(obj).val('');
                  }
              });
       });  
     //删除图片js：
     //本地上传的图片删除，去掉图片的id即可
         function delespan(id){
               $('#a'+id).remove();
               alert("删除成功");
            }

  //数据库中的图片删除：不同的业务自己处理
 /* function deleteImg(id){
              $.ajax({
                  url: "/business/deleteBannerImg.html?id="+id,
                  type: "POST",
                  dataType:'json',
                  success: function(obj){    
                      if(obj.code == 1){
                          alert(obj.message);
                          $('#a'+id).remove();
                       }else if(obj.code == 0){
                          alert("删除失败");
                          return false;
                       }

                  }
                  });         
               }  */ 
  </script>
  </html>
  